@page
@model ThridGroup.ERP.Web.Pages.UserViewModel
@{
    ViewData["Title"] = "用户管理";
}

<div class="layui-card">
    <div class="layui-card-header">
        用户管理
        <button type="button" class="layui-btn layui-btn-sm" id="btnAdd">
            <i class="layui-icon">&#xe654;</i> 新增
        </button>
    </div>
    <div class="layui-card-body">
        <!-- 数据表格 -->
        <table id="userTable" lay-filter="userTable"></table>
    </div>
</div>

<!-- 表格操作列模板 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="assignRole">分配角色</a>
</script>

<!-- 分配角色弹出框 -->
<div id="assignRoleDialog" style="display: none; padding: 20px;">
    <form class="layui-form" lay-filter="assignRoleForm">
        <div class="layui-form-item">
            <label class="layui-form-label">选择角色</label>
            <div class="layui-input-block" id="roleCheckboxes">
                <!-- 角色多选框将在这里动态生成 -->
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit lay-filter="submitAssignRole">确定</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
            </div>
        </div>
    </form>
</div>

<script>
layui.use(['table', 'form', 'layer'], function(){
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    
    // 初始化表格
    table.render({
        elem: '#userTable',
        url: '/RBAC/QueryUser',  // 用户数据接口
        page: true,
        toolbar: true,
        defaultToolbar: ['filter', 'print', 'exports'],
        cols: [[
            {field: 'id', title: 'ID', width: 80, sort: true},
            {field: 'userName', title: '用户名', width: 120},
            {field: 'userNickName', title: '昵称', width: 120},
            {field: 'createTime', title: '创建时间', width: 180},
            {title: '操作', width: 250, toolbar: '#tableBar', fixed: 'right'}
        ]]
    });

    // 监听工具条
    table.on('tool(userTable)', function(obj){
        var data = obj.data;
        if(obj.event === 'edit'){
            // 编辑操作
            layer.msg('编辑：' + data.id);
        } else if(obj.event === 'del'){
            // 删除操作
            layer.confirm('确定删除该用户吗？', function(index){
                $.ajax({
                    url: '/RBAC/DeleteUser?id=' + data.id,
                    type: 'DELETE',
                    success: function(res){
                        if(res){
                            layer.msg('删除成功');
                            obj.del();
                        } else {
                            layer.msg('删除失败');
                        }
                    }
                });
                layer.close(index);
            });
        } else if(obj.event === 'assignRole'){
            // 打开分配角色弹出框
            openAssignRoleDialog(data.id);
        }
    });

    // 打开分配角色对话框
    function openAssignRoleDialog(userId) {
        // 清空之前的复选框
        $('#roleCheckboxes').empty();
        
        // 获取所有角色列表
        $.get('/RBAC/QueryRole', function(roles) {
            // 获取用户当前角色
            $.get('/RBAC/FullUserRole?id=' + userId, function(userRole) {
                var selectedRoles = userRole ? userRole.roleId : [];
                
                // 生成角色复选框
                roles.forEach(function(role) {
                    var checked = selectedRoles.includes(role.id) ? 'checked' : '';
                    var checkbox = `
                        <input type="checkbox" name="roles" value="${role.id}" 
                               title="${role.roleName}" lay-skin="primary" ${checked}>
                    `;
                    $('#roleCheckboxes').append(checkbox);
                });
                
                // 重新渲染表单
                form.render('checkbox');
                
                // 打开弹出框
                layer.open({
                    type: 1,
                    title: '分配角色',
                    area: ['500px', '400px'],
                    content: $('#assignRoleDialog'),
                    success: function() {
                        // 存储当前用户ID供提交时使用
                        $('#assignRoleDialog').data('userId', userId);
                    }
                });
            });
        });
    }

    // 监听分配角色表单提交
    form.on('submit(submitAssignRole)', function() {
        var userId = $('#assignRoleDialog').data('userId');
        var selectedRoles = [];
        
        // 获取选中的角色ID
        $('input[name="roles"]:checked').each(function() {
            selectedRoles.push(parseInt($(this).val()));
        });

        // 提交数据
        $.ajax({
            url: '/RBAC/AddUserRole',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                userId: userId,
                roleId: selectedRoles
            }),
            success: function(res) {
                if(res > 0) {
                    layer.msg('角色分配成功');
                    layer.closeAll('page');
                    // 刷新表格
                    table.reload('userTable');
                } else {
                    layer.msg('角色分配失败');
                }
            },
            error: function() {
                layer.msg('操作失败，请重试');
            }
        });
        
        return false;
    });

    // 新增用户按钮点击事件
    $('#btnAdd').on('click', function(){
        layer.msg('新增用户');
        // 这里可以添加打开新增用户表单的代码
    });
});
</script>